import React, { useState, useEffect } from 'react';

const themes = [
  'light',
  'dark',
  'cupcake',
  'bumblebee',
  'emerald',
  'corporate',
  'synthwave',
  'retro',
  'cyberpunk',
  'valentine',
  'halloween',
  'garden',
  'forest',
  'aqua',
  'lofi',
  'pastel',
  'fantasy',
  'wireframe',
  'black',
  'luxury',
  'dracula',
  'cmyk',
  'autumn',
  'business',
  'acid',
  'lemonade',
  'night',
  'coffee',
  'winter',
];

const ThemeToggle: React.FC = () => {
  const [currentTheme, setCurrentTheme] = useState('light');

  useEffect(() => {
    // 从 localStorage 获取保存的主题
    const savedTheme = localStorage.getItem('theme') || 'light';
    setCurrentTheme(savedTheme);
    document.documentElement.setAttribute('data-theme', savedTheme);
  }, []);

  const changeTheme = (theme: string) => {
    setCurrentTheme(theme);
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  };

  return (
    <div className="dropdown dropdown-end relative z-50">
      <label tabIndex={0} className="btn btn-ghost btn-lg cursor-pointer">
        <svg
          className="w-6 h-6"
          fill="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2c1.38 0 2.5 1.12 2.5 2.5S13.38 7 12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5c0-1.38 1.12-2.5 2.5-2.5S22 10.62 22 12c0 5.51-4.49 10-10 10z"/>
          <circle cx="6.5" cy="11.5" r="1.5"/>
          <circle cx="9.5" cy="7.5" r="1.5"/>
          <circle cx="14.5" cy="7.5" r="1.5"/>
          <circle cx="17.5" cy="11.5" r="1.5"/>
        </svg>
        主题
      </label>
      <div
        tabIndex={0}
        className="dropdown-content bg-base-100 rounded-box z-[99999] w-96 p-4 shadow-2xl border border-base-300 mt-2"
      >
        <div className="grid grid-cols-3 gap-3">
          {themes.map((theme) => (
            <button
              key={theme}
              className={`btn btn-sm capitalize ${
                currentTheme === theme ? 'btn-primary' : 'btn-outline'
              }`}
              onClick={() => changeTheme(theme)}
            >
              <div className="flex items-center gap-2">
                <div
                  className="w-3 h-3 rounded-full"
                  style={{
                    background: getThemePreview(theme),
                  }}
                ></div>
                <span className="text-xs">{theme}</span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

// 为不同主题提供预览颜色
const getThemePreview = (theme: string): string => {
  const themeColors: { [key: string]: string } = {
    light: '#ffffff',
    dark: '#1f2937',
    cupcake: '#faf7f5',
    bumblebee: '#f59e0b',
    emerald: '#10b981',
    corporate: '#1e40af',
    synthwave: '#e11d48',
    retro: '#ef4444',
    cyberpunk: '#facc15',
    valentine: '#ec4899',
    halloween: '#f97316',
    garden: '#22c55e',
    forest: '#15803d',
    aqua: '#06b6d4',
    lofi: '#6b7280',
    pastel: '#f3e8ff',
    fantasy: '#c084fc',
    wireframe: '#000000',
    black: '#000000',
    luxury: '#d4af37',
    dracula: '#6366f1',
    cmyk: '#00ffff',
    autumn: '#dc2626',
    business: '#1e40af',
    acid: '#a3e635',
    lemonade: '#fbbf24',
    night: '#1e293b',
    coffee: '#92400e',
    winter: '#3b82f6',
  };
  return themeColors[theme] || '#ffffff';
};

export default ThemeToggle;